<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const examList = ref([
  {
    label: '体检套餐',
    desc: '选择体检套餐、预约体检时间、查询体检报告',
    icon: 'icon-tijiantaocanxiaoliang',
    span: 12,
    url: '/pages/examination/plan'
  },
  {
    label: '检验检查项目',
    desc: '提供检验项目选择、预约、缴费及报告查询一站式服务',
    icon: 'icon-jianyanjiancha',
    span: 12,
    url: '/pages/examination/inspect'
  },
  {
    label: '查看预约明细',
    desc: '可查看全部检验检查预约明细',
    icon: 'icon-chaxunyuyuejilu',
    span: 24,
    url: '/pages/examination/appoint'
  }
]);

function navigateTo(url: string) {
  uni.navigateTo({
    url
  });
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="px-15 pt-55">
        <wd-row :gutter="30">
          <wd-col v-for="item in examList" :key="item.label" :span="item.span">
            <view class="card mt-30 pb-80 pt-59" @click="navigateTo(item.url)">
              <view class="card-cover">
                <i class="iconfont" :class="[item.icon]" />
              </view>
              <view class="card-title mt-33">
                {{ item.label }}
              </view>
              <view class="card-desc mt-30 px-57">
                {{ item.desc }}
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>

      <view class="mt-65 px-50">
        <view class="page-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              1.如血液、影像、心电图等，并根据需求进行选择和预约
            </view>
            <view class="mt-10">
              2.可以选择不同体检套餐，根据个人需求选择合适的套餐
            </view>
            <view class="mt-10">
              3.可以查看已预约的检查项目、时间、地点等信息
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '检验/检查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .card {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    height: 380px;

    .card-cover {
      @apply m-auto flex-center;
      width: 172px;
      height: 172px;
      border-radius: 50%;
      background: #f3f7ff;
      .iconfont {
        font-size: 96px;
        color: var(--primary);
        &.icon-chaxunyuyuejilu {
          font-size: 140px;
        }
      }
    }

    .card-title {
      font-size: 42px;
      font-weight: bold;
      color: var(--text-color);

      text-align: center;
    }

    .card-desc {
      font-size: 30px;
      text-align: center;
      color: var(--secondary-text-color);
    }

    &:hover,
    &:active {
      background: var(--primary);
      cursor: pointer;
      border-color: #fff;
      .card-cover {
        background: #2d85f6;
      }
      .card-title,
      .card-desc {
        color: #fff;
      }
      .iconfont {
        color: #fff;
      }
    }
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
